<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>产品报修</title>
    <link rel="stylesheet" href="../../plugin/css/fonts/font-awesome.min.css" />
    <link rel="stylesheet" href="../../plugin/weui/css/weui.min.css" />
    <link rel="stylesheet" href="../../plugin/weui/css/jquery-weui.min.css" />
    <link rel="stylesheet" href="../../plugin/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" media="all">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../plugin/mui/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../css/global.css"/>
    <link rel="stylesheet" type="text/css" href="../css/workFeedback.css"/>
    <script src="../../plugin/rewrite/js/citySet.js" charset="utf-8"></script>
    <script src="../../plugin/rewrite/js/Popt.js" charset="utf-8"></script>

</head>

<body style="position: absolute">
<div class="content">
    <div class="content-block-title">产品信息:</div>
    <div class="m-cell">
        <div class="cell-item">
            <div class="cell-left">工单编号</div>
            <input class="cell-right" type="text" id="workOrderNo"/>
        </div>
        <div class="cell-item">
            <div class="cell-left">产品名称</div>
            <input class="cell-right" type="text" id="productName"/>
        </div>
    </div>
    <div class="content-block-title">维修内容:</div>
    <div class="m-cell">
        <div class="cell-item cell-item3">
            <div class="cell-right">
                <textarea class="cell-right weui-textarea" id="problemDescService" placeholder="请对产品问题进行描述，不少于10个字" rows="3"></textarea>
				<div class="addpic">
					<a href="#uploadPicVideo">
						<button type="button" class="layui-btn">上传图片/视频</button>
					</a>
				</div>
				<div class="layui-upload detailImg">
					<div class="layui-upload-list">
						<blockquote style="margin-top: 10px;">
							<div class="layui-upload-list" id="picsPlace"></div>
						</blockquote>
					</div>
					<div class="layui-form-item video" id="videoPlace" style="display: none;">
					</div>

				</div>
            </div>
        </div>
    </div>
    <p id="picserror"></p>
    <p id="vidoeerror"></p>

    <!--浏览删除图片-->
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
    
    <!--上传视频图片弹出框-->
    <div id="uploadPicVideo" class="mui-popover mui-popover-action mui-popover-bottom">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <!-- <input type="file" name="file" id="doc" multiple="multiple"  onchange="javascript:setImagePreviews();" accept="image/*" /> -->
                <div id="uploadpic" >上传图片</div>
            </li>
            <li class="mui-table-view-cell">
                <div id="uploadVideo">上传视频</div>
            </li>
        </ul>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#uploadPicVideo">
                    <b>取消</b>
                </a>
            </li>
        </ul>
    </div>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 5px;">
        <li class="layui-nav-item ">
            <a href="javascript:;" style="color: #545050;font-size: 0.7rem;">选择维修方式<input type="text" disabled="disabled" class="cell-right" id="repairMethod"/></a>
            <dl class="layui-nav-child" >
                <dd class="dd">
                    <a onclick="hidenumber()" style="background-color: #eee">
                        <div class="layui-unselect layui-form-radio">
                            <i class="layui-anim layui-icon"></i>
                            <div class="radio-left" val = "1">现场维修</div>
                        </div>
                    </a>
                </dd>
                <dd class="dd">
                    <a onclick="number()" style="background-color: #eee">
                        <div class="layui-unselect layui-form-radio "><i class="layui-anim layui-icon"></i>
                            <div class="radio-left" val = "2">寄件维修</div>
                        </div>
                    </a>
                </dd>
                <!--<dd class="dd">
                    <a onclick="hidenumber()" style="background-color: #eee">
                        <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                            <div class="radio-left">换货</div>
                        </div>
                    </a>
                </dd>
                <dd class="dd">
                    <a  onclick="hidenumber()" style="background-color: #eee">
                        <div class="layui-unselect layui-form-radio ">
                            <i class="layui-anim layui-icon"></i>
                            <div class="radio-left">退货</div>
                        </div>
                    </a>
                </dd>-->
            </dl>
        </li>
    </ul>
    <div id="numbershow"class="m-cell" style="display: none;margin-top: .2rem">
        <div class="cell-item">
            <div class="cell-left" >物流单号</div>
            <input type="text" class="cell-right" id="trackingNumber">
        </div>
    </div>
    <div class="content-block-title">所需配件:</div>
    <div class="m-cell">
        <div class="cell-item">
            <div class="cell-left">所需配件</div>
            <button id="city" type="button" class="mui-col-xs-12 mui-btn-outlined mui-btn-primary mui-btn register"
                    style="border: none" onclick="show()">
                <i class="fa fa-plus" style="color: #0076FF;"></i>添加
            </button>
        </div>
        <div id="pro" class="cell-item" style="height:auto;display: none;border-bottom:1px solid #eee ">
            <!--//js动态加载-->
        </div>
        <div style="height: 10px;background-color: #F0EFF4"></div>
    </div>
    <div class="content-block-title">维修费用:</div>
    <div class="m-cell">
        <div class="cell-item">
            <div class="cell-left">零配件费(元)</div>
            <input class="cell-right" type="text" style="padding-left: 50%" placeholder="请输入费用" id="sparepartFee"/>
        </div>
        <div class="cell-item">
            <div class="cell-left">维修费(元)</div>
            <input class="cell-right" type="text" style="padding-left: 50%" placeholder="请输入费用" id="repairFee"/>
        </div>
        <div class="cell-item">
            <div class="cell-left">上门服务费(元)</div>
            <input class="cell-right" type="text" style="padding-left: 50%" placeholder="请输入费用" id="doorToDoorFee"/>
        </div>
        </div>
    </div>
</div>

<footer class="footer" id="submitbill">
    <div id="test9">
        <button type="button" id="submitFeedBack" class="mui-col-xs-12 mui-btn-outlined mui-btn-primary mui-btn register">
            提交信息
        </button>
    </div>
</footer>
</body>
</html>
<script src="../../plugin/jquery/jquery-2.2.3.min.js"></script>
<script src="../../plugin/vue/vue.min.js"></script>
<script src="../../plugin/weui/js/jquery-weui.min.js"></script>
<script src="../../plugin/mui/js/mui.min.js"></script>
<script src="../../plugin/weui/js/city-picker.min.js"></script>
<script src="../../plugin/tencent/cos-js-sdk-v5.min.js"></script>
<script src="../../plugin/layui/layui.js" charset="utf-8"></script>
<script src="../../plugin/tencent/ugcUploader.js"></script>

<script src="../../common/common.js"></script>
<script src="../../common/constant.js"></script>
<script src="../../common/server.js"></script>

<script src="../js/workFeedback.js"></script>
<script type="text/javascript">
    mui.init();
    var mask = mui.createMask(); //callback为用户点击蒙版时自动执行的回调；
    function show() {
        mask.show(); //显示遮罩
    }
    $("#city").click(function (e) {
        SelCity(this, e);
        console.log(this.id);
    });
    $("#city1").click(function (e) {
        SelCity(this, e);
        console.log(this);
    });
  //   function show() {
  // console.log(1)
  //       mask.show(); //显示遮罩
  //   }
</script>
<script>
    function number() {
        document.getElementById('numbershow').style.display="block";
    }
    function hidenumber() {
        document.getElementById('numbershow').style.display="none";
    }
</script>
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
<script type="text/javascript">
    //下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {

            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
            var imgObjPreview = document.getElementById("img" + i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            } else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }
</script>